<template>
  <div class="personal_edit">
    <el-container class="nav-box">
      <el-header>
        <el-row>
          <el-col class="logo-box" :span="6">
            <icon-font
              class="nav-logo"
              style="visibility: hidden;"
              icon="icon-global-001"
            />
            <span class="logo-name">
              <img :src="active_logo" alt="logo">
            </span>
          </el-col>
          <el-col :span="18" class="user-info" style="padding-right: 16px;">
            <el-dropdown>
              <div class="el-dropdown-link position">
                <div class="positionInfo">
                  <span>{{ companyName === 'null' ? positionCompanyName === 'null' ? '' : positionCompanyName || '' : companyName || '' }}</span>
                  <span>{{ positionName || '' }}</span>
                </div>
                <i
                  v-if="positionList.length"
                  class="el-icon-arrow-down el-icon--right"
                />
              </div>
              <el-dropdown-menu slot="dropdown" v-if="positionList.length">
                <el-dropdown-item
                  v-for="(item, index) in positionList"
                  :key="index"
                  @click.native="choosePosition(item.companyId)"
                  style="
                    display: flex;
                    flex-direction: column;
                    text-align: right;
                  "
                >
                  <span>{{ item.companyName || '' }}</span>
                  <span>{{ item.positionName }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- 用户信息，修改密码 -->
            <el-dropdown @command="handleDropdown">
              <span class="el-dropdown-link">
                {{ $store.state.userName || '--' }}
                <i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item command="putPass">修改密码</el-dropdown-item> -->
                <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                <el-dropdown-item
                  v-show="showCompanyCenter"
                  command="enterPriseCenter"
                  >企业中心</el-dropdown-item
                >
                <el-dropdown-item command="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>

      <el-main v-loading="allPageLoading">
        <div class="separator_box">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              ><span class="home" @click="home">首页</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item class="personal_to"
              ><span @click="pageBack">个人中心</span></el-breadcrumb-item
            >
            <el-breadcrumb-item class="curry_item">我的资料</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="main_box">
          <div class="edit_title">
            <el-image class="edit_title_icon" :src="edit_title_icon"></el-image>
            我的资料
          </div>
          <div class="edit_main_box">
            <el-form
              :model="currentUserInfo"
              status-icon
              :rules="rules"
              ref="currentUserInfo"
              label-width="100px"
            >
              <el-form-item label="账号：" :prop="currentUserInfo.loginName">
                <el-input
                  disabled
                  type="text"
                  v-model="currentUserInfo.loginName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item class="photo_form_item" label="身份证照片：">
                <div class="photo_box">
                  <!-- 我是正面 1 -->
                  <PictureUpload
                    class="card_positive_box"
                    :imgStr1="currentUserInfo.identityFront"
                    @RequestUpload="uploadSuccess"
                    :Identificationone="Identificationones"
                  ></PictureUpload>
                  <div class="card_positive_label">身份证人面像</div>
                  <!-- 我是反面 2-->
                  <PictureUpload
                    class="card_negative_box"
                    :imgStr2="currentUserInfo.identityBack"
                    @RequestUpload="uploadSuccess"
                    :Identificationtwo="Identificationtwos"
                  ></PictureUpload>
                  <div class="card_negative_label">身份证国徽面像</div>
                </div>
              </el-form-item>
              <el-form-item label="姓名：" :prop="currentUserInfo.name">
                <el-input
                  type="text"
                  placeholder="请输入您的姓名"
                  v-model="currentUserInfo.name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别：" prop="gender">
                <el-radio-group
                  class="gender_box"
                  v-model="currentUserInfo.gender"
                >
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="birthDate" label="生日：" prop="birthDate">
                <el-date-picker
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  v-model="currentUserInfo.birthDate"
                  type="date"
                  placeholder="请选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="民族：" prop="nation">
                <el-input
                  type="text"
                  placeholder="请输入您的民族"
                  v-model="currentUserInfo.nation"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="身份证号：" prop="identityId">
                <el-input
                  type="text"
                  placeholder="请输入身份证号码"
                  v-model="currentUserInfo.identityId"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="住址：" prop="address">
                <el-input
                  type="text"
                  placeholder="请输入您的住址"
                  v-model="currentUserInfo.address"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="签发机关：" prop="issueOffice">
                <el-input
                  type="text"
                  placeholder="请输入签发机关"
                  v-model="currentUserInfo.issueOffice"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="是否长期：" prop="isHasLoneTime">
                <el-radio-group
                  class="gender_box"
                  v-model="isHasLoneTime"
                  @change="changeTimeType"
                >
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                class="date_form-item"
                v-if="isHasLoneTime === 2"
                label="有效期："
                prop="startDate"
              >
                <el-date-picker
                  class="start_date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  v-model="currentUserInfo.startDate"
                  type="date"
                  placeholder="请选择日期"
                >
                </el-date-picker>
                <span class="split"> - </span>
                <el-date-picker
                  class="end_date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  v-model="currentUserInfo.endDate"
                  type="date"
                  placeholder="请选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <!-- 长期 -->
              <el-form-item
                class="date_form-item"
                v-if="isHasLoneTime === 1"
                label="有效期："
                prop="startDate"
              >
                <el-date-picker
                  class="start_date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  v-model="currentUserInfo.startDate"
                  type="date"
                  placeholder="请选择日期"
                >
                </el-date-picker>
                <span class="split"> - </span>
                <el-input
                  class="longtime"
                  type="text"
                  readonly
                  v-model="currentUserInfo.endDate"
                ></el-input>
              </el-form-item>
            </el-form>
            <div class="note">
              <p class="note_title">注意事项：</p>
              <ol>
                <li>
                  1、身份证国徽面与正面信息应为同一身份证的信息且在有效期内;
                </li>
                <li>
                  2、所有上传照片需清晰且未遮挡，请勿进行美化和修改，以免认证失败；
                </li>
                <li>3、上传图片文件格式支持png，jpg和bmp；</li>
                <li>4、单张图片大小不超过3MB，尺寸最小为500px * 500px；</li>
                <li>
                  5、所有上传信息均会被妥善保管，不会用于其他商业用途或传输给其他第三方。
                </li>
              </ol>
            </div>
          </div>
          <div class="save_button">
            <span @click="saveUserInfo" class="save_button_name"
              >保&nbsp;&nbsp;&nbsp;&nbsp;存</span
            >
            <span class="page_back" @click="pageBack">
              返&nbsp;&nbsp;&nbsp;&nbsp;回</span
            >
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import auth from '@mixins/auth'
import {username} from '@const/formValidate.js'
import md5 from 'js-md5'
import {hasIn} from 'lodash'
import cookie from 'js-cookie'
import {
  fddWebQueryPersonalCertification,
  fddWebApplyPersonalCertification,
} from '@const/api_interfaceCenter'

import {
  AcOverallStructureInfoSaveOrUpdate,
  AcOverallStructureInfoGetByFactoryCompanyId,
} from '@const/api_authCenter.js'

import {
  UcMerchantUserGetById,
  orderBackUcMerchantIdentityUsergetById,
  updateUserIdentityInfo,
  identityOCR,
} from '@const/api_staffCenter'

import VerificationSuccess from '@/moduleComponents/personal'
import EditTitleIcon from '@assets/personl/icon-person.png'

import identityFront from '@assets/personl/sfzzm.png'
import identityBack from '@assets/personl/sfzbm.png'
import PictureUpload from '@components/pictureUpload'
import EditImage from '@assets/personl/tx-icon.png'
import cropperUpload from '@/moduleComponents/personal/cropperUpload'

const TIME_COUNT = 60
export default {
  mixins: [auth],
  layout: 'blank',
  components: {VerificationSuccess, PictureUpload, cropperUpload},
  data() {
    var checkIdCard = (rule, value, callback) => {
      if (value.includes('*')) {
        callback()
        return
      }
      let reg = new RegExp(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/)
      let result = reg.test(value)
      if (!result) {
        return callback(new Error('请输入正确的身份证号'))
      } else {
        callback()
      }
    }
    return {
      active_logo: require('@assets/img/login/pc-caise-logo.png'),
      endDate: '',
      isHasLoneTime: 2,
      userImage: EditImage,
      identityInfoForm: {},
      Identificationones: '1',
      Identificationtwos: '2',
      idCard: '',
      userName: '',
      rules: {
        name: [{required: true, message: '请输入您的姓名'}],
        gender: [{required: true, message: '请选择性别'}],
        birthDate: [{required: true, message: '请输入您的生日'}],
        nation: [{required: true, message: '请输入您的民族'}],
        identityId: [{validator: checkIdCard, required: true, trigger: 'blur'}],
        address: [{required: true, message: '请输入您的地址'}],
        issueOffice: [{required: true, message: '请输入签发机关'}],
        expiryDate: [{required: true, message: '请选择日期'}],
      },
      edit_mage: EditImage,
      edit_title_icon: EditTitleIcon,
      errorState: true,
      phoneEmailupdateVisible: false,
      phoneEmailStepStatus: 1,
      phoneEmailDialogVisible: false,
      phoneNumberupdateVisible: false,
      phoneNumberStepStatus: 1,
      phoneNumberDialogVisible: false,
      updateAccountVisible: false,
      successTitle: '',
      updateSuccessVisible: false,
      phoneStepStatus: 1,
      phoneDialogPasswordUpdateVisible: false, //手机密码修改
      verificationStatus: 1,
      time: 30,
      phoneDialogVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      successReply: '',
      prompt: '',
      formLabelWidth: '87px',
      allPageLoading: false, // 页面loading
      currentUserInfo: {
        expiryDate: ['', ''],
        idPhoto: [],
        address: '北京',
        birthDate: '20200514',
        genderStr: '男',
        gender: 1,
        identityId: '410881202005149009',
        issuingAuthornameity: '河南',
        nation: '汉',
        name: '恒骄管理员',
        identityBack: identityBack,
        identityFront: identityFront,
        startDate: '',
        endDate: '',
      },
    }
  },
  mounted() {
    this.getCurrentUserInfo()
    // this.cardinformation();
  },

  computed: {
    showCompanyCenter() {
      return (this.$store.state.ifAdmin === 'true' && this.$store.state.companyId !== '0') || (this.$store.state.ifAdmin === true && this.$store.state.companyId !== '0')
    },
    ...mapState([
      'positionCompanyName',
      'companyName',
      'positionName',
      'positionList',
      'positionId',
    ]),

    showCompanyCode() {
      let companyCode = this.$store.state.companyCode
      return companyCode && companyCode !== 'null'
    },
    // 计算多个公司的展示
    customCompanyName() {
      return this.$store.state.companyName !== 'null'
        ? this.$store.state.companyName || '平台管理员'
        : '平台管理员'
    },
    gender() {
      return (gender) => {
        return gender.toString()
      }
    },
  },
  watch: {},
  methods: {
    getCurrentUserInfo() {
      this.$axios({
        method: 'get',
        url: UcMerchantUserGetById,
        params: {
          id: this.$store.state.userId,
        },
      })
        .then((res) => {
          if (res.status === 200) {
            this.currentUserInfo = res.data.payload || {}
            this.currentUserInfo.identityFront = identityFront
            this.currentUserInfo.identityBack = identityBack
            console.log(' this.currentUserInfo:', this.currentUserInfo)
            this.cardinformation()
          }
        })
        .finally(() => {})
    },
    // orderBackUcMerchantIdentityUsergetById 获取身份证信息
    cardinformation() {
      this.$axios({
        method: 'get',
        url: `${orderBackUcMerchantIdentityUsergetById}?userId=${this.$store.state.userId}`,
        data: {
          userId: this.$store.state.userId,
        },
      }).then((res) => {
        if (res.data.code !== '0') return
        let temporary = res.data.payload
        this.$set(this.currentUserInfo, 'name', temporary.name)
        this.$set(this.currentUserInfo, 'genderStr', temporary.genderStr || 1)
        this.$set(this.currentUserInfo, 'gender', temporary.gender)
        this.$set(this.currentUserInfo, 'nation', temporary.nation)
        this.$set(this.currentUserInfo, 'identityId', temporary.identityId)
        this.$set(this.currentUserInfo, 'address', temporary.address)
        this.$set(this.currentUserInfo, 'issueOffice', temporary.issueOffice)
        this.$set(this.currentUserInfo, 'birthDate', temporary.birthDate)
        this.$set(
          this.currentUserInfo,
          'identityFront',
          temporary.identityFront || identityFront
        )
        this.$set(
          this.currentUserInfo,
          'identityBack',
          temporary.identityBack || identityBack
        )
        this.$set(this.currentUserInfo, 'id', temporary.id || '')

        this.$set(this.currentUserInfo, 'startDate', temporary.startDate)
        this.$set(this.currentUserInfo, 'endDate', temporary.endDate)
        let expiryDateObj = []
        expiryDateObj[0] = temporary.startDate
        expiryDateObj[1] = temporary.endDate
        this.$set(this.currentUserInfo, 'expiryDate', expiryDateObj)
        this.endDate = temporary.endDate
        if (temporary.endDate === '长期') {
          this.isHasLoneTime = 1
        } else {
          this.isHasLoneTime = 2
        }
      })
    },
    handleDropdown(command) {
      if (command === 'logout') {
        this.$store.commit(command)
        this.$router.replace(this.$PATH_CONST.login_page)
      } else if (command === 'putPass') {
        this.detailVisible = true
      } else if (command === 'userInfo') {
        // this.getUserInfo()
        // this.cardinformation()
        this.$router.push('/systemSetup/personal')
      } else if (command === 'enterPriseCenter') {
        this.toEnterpriseCenter()
      }
    },
    identityOCR(url, cardSide) {
      this.$axios({
        method: 'post',
        url: identityOCR,
        data: {
          cardSide: cardSide,
          imgUrl: url,
        },
      }).then((res) => {
        if (res.data.code !== '0') return
        let temporary = res.data.payload
        if (temporary.name) {
          this.$set(this.currentUserInfo, 'name', temporary.name)
        }
        if (temporary.gender) {
          this.$set(this.currentUserInfo, 'gender', temporary.gender)
        }
        if (temporary.nation) {
          this.$set(this.currentUserInfo, 'nation', temporary.nation)
        }
        if (temporary.identityId) {
          this.$set(this.currentUserInfo, 'identityId', temporary.identityId)
        }
        if (temporary.address) {
          this.$set(this.currentUserInfo, 'address', temporary.address)
        }
        if (temporary.issueOffice) {
          this.$set(this.currentUserInfo, 'issueOffice', temporary.issueOffice)
        }
        if (temporary.birthDate) {
          this.$set(this.currentUserInfo, 'birthDate', temporary.birthDate)
        }
        if (temporary.identityFront) {
          this.$set(
            this.currentUserInfo,
            'identityFront',
            temporary.identityFront
          )
        }
        if (temporary.identityBack) {
          this.$set(
            this.currentUserInfo,
            'identityBack',
            temporary.identityBack
          )
        }
        if (temporary.id) {
          this.$set(this.currentUserInfo, 'id', temporary.id)
        }
        if (temporary.startDate) {
          this.$set(this.currentUserInfo, 'startDate', temporary.startDate)
        }
        if (temporary.endDate === '长期') {
          this.isHasLoneTime = 1
        }
        if (temporary.endDate && temporary.endDate !== '长期') {
          this.isHasLoneTime = 2
        }
        if (temporary.endDate) {
          let endDate =
            temporary.endDate === '长期' ? '长期' : temporary.endDate
          this.$set(this.currentUserInfo, 'endDate', endDate)
        }
        if (temporary.name) {
          this.$set(this.currentUserInfo, 'name', temporary.name)
        }
      })
    },
    uploadSuccess(url, nnns) {
      if (nnns === '1') {
        this.currentUserInfo.identityFront = url // 身份证照片正面
        this.identityOCR(url, 'FRONT')
      } else {
        this.currentUserInfo.identityBack = url // 有效期限片反面
        this.identityOCR(url, 'BACK')
      }
    },
    //裁剪图片弹框
    beforeAvatarUpload(file) {
      this.$refs.cropperUploadComponent.showDialog()
      this.$refs.cropperUploadComponent.beforeAvatarUpload(file)
    },
    reUpload() {
      document.getElementsByClassName('el-upload')[0].click()
    },
    saveOrUpdateStructure(res, type) {
      let params = {}
      params.factoryCompanyId = this.$store.state.companyId
      if (type === 'img') {
        params.structureLogo = res.data.payload
      } else {
        if (this.structureName === '') {
          this.$message.error('请填写体系系统名称')
          return false
        }
        params.structureName = this.structureName
      }
      this.$axios({
        url: `${AcOverallStructureInfoSaveOrUpdate}?factoryCompanyId=${this.$store.state.companyId}`,
        method: 'post',
        data: params,
      })
        .then((res) => {
          if (res.data.code === '0') {
            this.getStructureByFactoryCompanyId()
            this.$message.success('操作成功')
          }
        })
        .finally(() => {})
    },
    getStructureByFactoryCompanyId() {
      this.$axios({
        url: `${AcOverallStructureInfoGetByFactoryCompanyId}?factoryCompanyId=${this.$store.state.companyId}`,
        method: 'get',
      })
        .then((res) => {
          if (res.data.code === '0') {
            let data = hasIn(res, ['data', 'payload']) ? res.data.payload : []
            this.userImage = data.structureLogo
            this.structureName = data.structureName
          }
        })
        .finally(() => {})
    },
    // 切换岗位
    choosePosition(val) {
      if (this.positionId === val) {
        this.$message.error('当前已是该岗位')
        return false
      }
      let item = {
        positionId: val,
      }
      this.$store.dispatch('choosePosition', {item})
    },
    //保存客户信息
    saveUserInfo() {
      if (!this.currentUserInfo.startDate || !this.currentUserInfo.endDate) {
        this.$message({
          type: 'warning',
          message: '有效时间不能为空',
        })
        return
      }
      this.$refs['currentUserInfo'].validate((valid) => {
        let parms = {
          address: this.currentUserInfo.address || '',
          birthDate: this.currentUserInfo.birthDate || '',
          gender: this.currentUserInfo.gender || '',
          id: this.currentUserInfo.id || '',
          identityBack: this.currentUserInfo.identityBack || '',
          identityFront: this.currentUserInfo.identityFront || '',
          identityId: this.currentUserInfo.identityId || '',
          issueOffice: this.currentUserInfo.issueOffice || '',
          name: this.currentUserInfo.name || '',
          nation: this.currentUserInfo.nation || '',
          userId: this.$store.state.userId || '',
          startDate: this.currentUserInfo.startDate,
          endDate: this.currentUserInfo.endDate,
        }
        console.log('this.currentUserInfo:', this.currentUserInfo)
        if (valid) {
          this.$axios({
            method: 'post',
            url: updateUserIdentityInfo,
            data: parms,
          })
            .then((res) => {
              if (res.status === 200) {
                this.$message({
                  type: 'success',
                  message: '修改成功!',
                })
              }
              console.log('res:', res)
            })
            .finally((res) => {
              console.log('res:', res)
            })
        }
      })
    },
    toEnterpriseCenter() {
      this.$router.push({path: '/enterpriseCenter'})
    },
    //返回个人中心
    pageBack() {
      this.$router.push('/systemSetup/personal/')
    },
    //返回首页
    home() {
      console.log('===aaa')
      if(this.$store.state.companyId === '0') {
        this.$router.push('/business')
      } else {
        this.$router.push('/')
      }
    },
    changeTimeType(val) {
      if (val === 1) {
        this.$set(this.currentUserInfo, 'endDate', '长期')
      } else {
        this.$set(this.currentUserInfo, 'endDate', '')
        console.log('this.currentUserInfo:', this.currentUserInfo.endDate)
      }
    },
  },
}
</script>
<style lang="less">
@import '../m-front-common/pc/assets/var.less';
.personal_edit {
  .separator_box {
    .el-breadcrumb {
      height: 60px;
      line-height: 60px;
      color: #999;
      font-size: 16px;
    }
    .curry_item {
      .el-breadcrumb__inner {
        color: #333;
      }
    }

    width: 1200px;
    margin: 0 auto;
  }

  height: 100%;
  background-color: #f4f6fb;
  .nav-box {
    height: 100%;
    .el-header {
      padding: 0 48px;
      background-color: #fff;
      .logo-box {
        display: flex;
        align-items: center;
        .nav-logo {
          font-size: 45px;
          color: @themeBlue;
          vertical-align: middle;
        }
        .logo-name {
          height: 53px;
          background-color: #fff;
          font-size: 22px;
          color: @themeBlue;
          font-weight: bold;
          cursor: default;
          display: flex;
          align-items: center;
        }
      }
      .user-info {
        text-align: right;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .el-input__inner {
          border: none;
        }
        .position {
          display: flex;
          align-items: center;
          margin-right: 15px;
          .positionInfo {
            display: flex;
            flex-direction: column;
          }
        }
        .info-company {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          margin-right: 30px;
        }

        .icon-group {
          width: 140px;
          display: flex;
          justify-content: space-evenly;

          .icon-btn {
            cursor: pointer;
          }

          .el-badge__content {
            border: none;
          }
        }
      }
    }
    .el-main {
      padding: 16px 48px;
      padding-top: 0;
      .system-classify-box {
        padding: 0;
        width: 100%;
        overflow: hidden;
        background-color: #fff;
        padding-bottom: 4px;
        margin-bottom: 16px;
        .classify-title {
          list-style: none;
          font-weight: 400;
          font-size: 18px;
          color: #26344c;
          line-height: 20px;
          margin: 24px 0 44px 26px;
        }
        .classify-list {
          display: flex;
          flex-wrap: wrap;
          .classify-item {
            list-style: none;
            margin-bottom: 44px;
            width: 33%;
            display: flex;
            justify-content: center;
            align-items: center;
            .el-card {
              width: 310px;
              border-radius: 0;
              cursor: pointer;
              .el-card__body {
                padding: 16px;
                display: flex;
                align-items: center;
                .system-icon {
                  width: 60px;
                  height: 60px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-right: 8px;
                  border-radius: 4px;
                  &.font-icon-apps-001 {
                    background-color: #428cc4;
                  }
                  &.font-icon-apps-002 {
                    background-color: #338ced;
                  }
                  &.font-icon-apps-003 {
                    background-color: #ed9033;
                  }
                  &.font-icon-apps-004 {
                    background-color: #338ced;
                  }
                  &.font-icon-apps-005 {
                    background-color: #00c7c5;
                  }
                  &.font-icon-apps-006 {
                    background-color: #f09850;
                  }
                  &.font-icon-apps-007 {
                    background-color: #dbb31b;
                  }
                  &.font-icon-apps-008 {
                    background-color: #15bc84;
                  }
                  &.font-iconbokeyun {
                    background-color: #2371c5;
                  }
                  &.font-iconbokedileyun1 {
                    background-color: #2371c5;
                  }
                  &.font-bokedileyun {
                    background-color: #2371c5;
                  }
                  &.font-iconbkdly {
                    background-color: #2371c5;
                  }
                  &.font-jxt-sy-gkdspt-icon {
                    background-color: #2371c5;
                  }
                  &.font-iconjxt-sy-gkdspt-icon2x {
                    background-color: #2371c5;
                  }
                  .iconfont {
                    font-size: 40px;
                    color: #fff;
                  }
                }
                .system-name-box {
                  flex: 1;
                  .system-name {
                    color: @themeBlue;
                    font-size: 20px;
                    line-height: 20px;
                    margin-bottom: 8px;
                    overflow: hidden;
                    &.font-icon-apps-001 {
                      color: #428cc4;
                    }
                    &.font-icon-apps-002 {
                      color: #338ced;
                    }
                    &.font-icon-apps-003 {
                      color: #ed9033;
                    }
                    &.font-icon-apps-004 {
                      color: #338ced;
                    }
                    &.font-icon-apps-005 {
                      color: #00c7c5;
                    }
                    &.font-icon-apps-006 {
                      color: #f09850;
                    }
                    &.font-icon-apps-007 {
                      color: #dbb31b;
                    }
                    &.font-icon-apps-008 {
                      color: #15bc84;
                    }
                  }
                  .system-company-name {
                    font-size: 14px;
                    height: 16px;
                    line-height: 16px;
                    color: #a7b1c7;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                  .system-desc {
                    line-height: 16px;
                    font-size: 12px;
                    color: #a7b1c7;
                    height: 32px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                  }
                }
              }
            }
          }
        }
      }
      .system-no-data {
        font-size: 16px;
        text-align: center;
        padding: 15px;
        border-radius: 5px;
        margin: 30px 30%;
        border: 1px solid #ccc;
        color: #606266;
      }
    }
  }
  .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
  }
  // .el-dialog__header {
  //   border: none;
  // }
  .el-dialog__body .description {
    font-size: 12px;
    color: #999ea2 !important;
    margin-left: 80px;
  }
  .phone_Number_dialog_box .news,
  .phone_Number_dialog_box .phone_number_box {
    text-align: center;
    font-size: 14px;
    color: #999ea2;
    height: 30px;
    line-height: 30px;
  }
  .phone_dialog_box .news,
  .phone_email_dialog_box .news,
  .phone_dialog_box .phone_number_box,
  .phone_email_dialog_box .phone_number_box {
    text-align: center;
    font-size: 14px;
    color: #999ea2;
    height: 30px;
    line-height: 30px;
  }

  .steps_box {
    margin-bottom: 40px;
  }

  .phone_number_box {
    color: #666 !important;
    font-size: 14px !important;
    font-weight: bold;
  }
  .phone_number {
    color: #ff5c00 !important;
  }
  .verification_code_box {
    width: 100%;
    height: 43px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    border: 1px solid #ccc;
    line-height: 43px;
    border-radius: 5px;
  }
  .verification_code {
    width: 195px;
  }
  .verification_code_box .el-input__inner {
    width: 195px;
    height: 43px;
    border: none !important;
  }
  .get_verification_code {
    margin-right: 6px;
    cursor: pointer;
    color: #409eff;
  }
  .aggin_get_verification_code {
    margin-right: 6px;
    cursor: pointer;
    color: #409eff;
  }
  .get_verification_code_after {
    color: #ccc;
    margin-right: 6px;
  }
  .el-icon-message {
    font-size: 14px;
  }
  .next_btn {
    width: 100%;
    height: 45px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background-color: #409eff;
    margin: 20px 0;
    line-height: 45px;
    border-radius: 5px;
  }
  .phone_dialog_box .el-dialog__body,
  .phone_dialog_update_password_box .el-dialog__body {
    padding: 30px 55px 35px 55px;
  }
  .remember_password {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .phone_dialog_update_password_box {
    input {
      border-radius: 5px;
    }
  }
  .el-step__title {
    font-size: 12px;
  }
  .success_icon {
    text-align: center;
    font-size: 72px;
    font-weight: bold;
    color: #7ed96d;
  }
  .success_reply {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    text-align: center;
  }
  .prompt {
    text-align: center;
  }
  .error_box {
    border: 1px solid #f56c6c;
    background-color: #ffeee6;
    color: #f56c6c;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 10px;
    border-radius: 5px;
  }
  .main_box {
    position: relative;
    width: 1200px;
    background-color: #fff;
    margin: 0 auto;
    padding: 33px 0 33px 33px;
    .edit_title {
      width: 100%;
      height: 58px;
      line-height: 58px;
      border-bottom: 1px solid #dfe6ee;
      font-size: 16px;
      color: #333;
    }
    .edit_title_icon {
      width: 18px;
      height: 18px;
      margin-right: 3px;
      margin-bottom: -2px;
    }
    .edit_main_box {
      width: 965px;
      margin: 0 auto;
      margin-left: 247px;
    }
    .card_positive_box {
      margin-left: 30px;
      display: inline-block;
      .dialog-upload {
        width: 219px !important;
        height: 155px !important;
        border: none !important;
      }
      .el-image {
        width: 219px !important;
        height: 155px !important;
        img {
          border-radius: 5px;
        }
      }
    }
    .card_negative_box {
      margin-left: 30px;
      display: inline-block;
      .dialog-upload {
        width: 219px !important;
        height: 155px !important;
        border: none !important;
      }
      .el-image {
        width: 219px !important;
        height: 155px !important;
      }
    }
    .el-form-item {
      margin-top: 20px;
      margin-bottom: 0;
      width: 365px;
      label {
        color: #606266;
      }
      .longtime {
        position: relative;
        top: -55px;
        left: 155px;
        width: 168px;
        input {
          width: 140px;
          text-align: center;
        }
      }
      input {
        border-radius: 5px;
        width: 298px;
        height: 38px;
        line-height: 38px;
        margin-left: 30px;
      }
    }
    .el-date-editor {
      border-radius: 5px;
      overflow: hidden;
      width: 298px;
      margin-left: 30px;
      .el-range-separator {
        width: 24px;
      }
      input {
        width: 127px;
        padding: 0;
        margin: 0;
      }
    }
    .date_form-item {
      .el-form-item__content {
        height: 40px;
      }
    }
    .birthDate {
      .el-form-item__content {
        height: 38px;
        line-height: 38px;
      }
      input {
        width: 298px;
        padding-left: 27px;
      }
    }
    .el-form-item:nth-child(2) {
      margin-top: 50px;
      width: 635px;
    }
    .gender_box {
      margin-left: 32px;
    }
    .note {
      margin-top: 18px;
      ol {
        margin-left: 89px;
        margin-top: -18px;
      }
    }
    .note_title {
      font-size: 14px;
      color: #001600;
      height: 38px;
      line-height: 38px;
      position: relative;
      left: 17px;
    }
    li {
      font-size: 14px;
      color: #999;
      list-style: none;
    }
    .edit_image_box {
      width: 136px;
      height: 200px;
      position: absolute;
      right: 75px;
      top: 195px;
      text-align: center;
      .edit_mage_btn {
        width: 116px;
        line-height: 40px;
        background: #f1f1f1;
        border: 1px solid #dfe2e8;
        border-radius: 5px;
        margin: 0 auto;
        cursor: pointer;
        margin-top: 15px;
        position: absolute;
        z-index: 1;
        top: 138px;
        left: 13px;
      }
      .dialog-upload {
        width: 136px !important;
        height: 176px !important;
        border: none !important;

        .el-image {
          width: 136px !important;
          height: 136px !important;
        }
        // position: absolute;
        z-index: 2;
      }
      // .edit_mage_btn {
      //   position: absolute;
      //   z-index: 1;
      //   top: 138px;
      //   left: 13px;
      // }
    }
    .save_button {
      width: 380px;
      line-height: 38px;
      // background: #2371c5;
      border-radius: 5px;
      margin: 0 auto;
      margin-top: 105px;
      color: #fff;
      text-align: center;
      cursor: pointer;
    }
    .photo_box {
      position: relative;
      margin-bottom: 6px;
    }
    .card_positive_label {
      position: absolute;
      bottom: -20px;
      left: 94px;
    }
    .card_negative_label {
      position: absolute;
      bottom: -20px;
      left: 357px;
    }
    .el-form-item__error {
      left: 30px;
    }
    .dialog-footer .el-button {
      width: 98px;
      height: 36px;
    }
    .el-dialog__footer {
      height: 58px;
      .dialog-upload {
        height: 58px !important;
        width: 98px !important;
      }
    }
    .start_date,
    .end_date {
      width: 140px;
      input {
        padding-left: 26px;
        width: 100%;
      }
    }
    .end_date {
      position: relative;
      margin-left: 0;
      top: -55px;
      left: 185px;
    }
    .split {
      position: relative;
      top: -16px;
    }
    .photo_form_item {
      .el-form-item__content {
        width: 635px;
      }
    }
    .el-form-item__content {
      width: 322px;
    }
  }
  .save_button_name {
    display: inline-block;
    width: 162px;
    line-height: 38px;
    background: #2371c5;
    border-radius: 5px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    cursor: pointer;
    margin-right: 20px;
  }

  .page_back {
    display: inline-block;
    width: 162px;
    line-height: 38px;
    background: #ccc;
    border-radius: 5px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    cursor: pointer;
  }
  .home {
    cursor: pointer;
    font-size: 16px;
    color: #999;
  }
  .longtime {
    .input {
      width: 140px;
    }

    display: inline-block;
    width: 140px;
  }
  .personal_to {
    cursor: pointer;
    font-size: 16px;
    span {
      color: #999;
    }
  }
  .el-input__suffix {
    display: none;
  }
}
</style>
